<template>
  <div class="GoodsCategory">
    <scroll class="list-navbar" :click="true" ref="Nav" :data="products">
      <ul>
        <li
          v-for="(item, index) of products"
          :key="item.id"
          :class="{ listActive: currentIndex === index }"
          @click="selectMenu(index)"
        >
          {{ item.category_name }}
        </li>
      </ul>
    </scroll>
    <scroll
      class="right-pro"
      @scroll="scroll"
      :listen-scroll="true"
      :probe-type="3"
      :click="true"
      :data="products"
      ref="rightPro"
    >
      <div class="list-wrap">
        <div
          class="category-detail list-hook"
          v-for="item of products"
          :key="item.product_id"
        >
          <!--<img
            v-lazy="item.bannerUrl"
            error=""
            class="banner"
            alt=""
            v-if="item.bannerUrl"
          />-->
          <div class="category-title">
            <span>{{ item.category_name }}</span>
          </div>
          <div class="category-list">
            <div
              class="product"
              v-for="product of item.products"
              :key="product.product_id"
            >
              <img
                :alt="product.product_name"
                v-lazy="product.product_img"
                error=""
              />
              <p>{{ product.product_name }}</p>
            </div>
          </div>
        </div>
      </div>
    </scroll>
  </div>
</template>

<script type="text/ecmascript-6">
import Scroll from '_c/scroll/scroll';
import { getCategory } from "@/api/api";
export default {
  name: "CategoryGoods",
  data() {
    return {
      currentIndex: 0,
      listHeight: [],
      products: []
    };
  },
  methods: {
    scroll(pos) {
      for (let i = 0, len = this.listHeight.length; i < len; i++) {
        if (-pos.y >= this.listHeight[i] && -pos.y < this.listHeight[i + 1]) {
          this.$refs.Nav.scrollToElement(this.$refs.Nav.$el.getElementsByTagName('li')[i], 0);
          this.currentIndex = i;
        }
      }
    },
    calcListHeight() {
      let list = this.$refs.rightPro.$el.getElementsByClassName("list-hook");
      let height = 0;
      this.listHeight.push(height);
      for (let i = 0, len = list.length; i < len; i++) {
        let item = list[i];
        if (i === list.length - 1) {
          item.style.paddingBottom = `${window.innerHeight - list[i].clientHeight - 55}px`;
        }
        height += item.clientHeight;
        this.listHeight.push(height);
      }
      console.log(this.listHeight)
    },
    selectMenu(index) {
      let item = this.$refs.rightPro.$el.getElementsByClassName("list-hook")[index];
      this.$refs.rightPro.scrollToElement(item, 0);
    }
  },
  components: {
    Scroll
  },
  mounted() {
    getCategory()
      .then(res=>{
        this.products = res.data;
        this.$nextTick(() => {
          this.calcListHeight()
        })
      }).catch(err=>{
      console.log(err)
    });
  }
};
</script>

<style scoped lang="stylus">
.GoodsCategory
  width: 100%;
  top: 55px;
  bottom: 50px;
  left: 0;
  position: absolute;
  overflow: hidden;
  .list-navbar
    width: 80px;
    min-width: 80px;
    float: left;
    height: 100%;
    background: white;

    ul li
      font-size: 14px;
      height: 50px;
      ellipsis()
      line-height: 50px;
      border-bottom: 1px solid #eeeeee;
      text-align: center;
      background: #fff;
      color: #3c3c3c;
      transition: font-size .1s ease-in

      &.listActive
        color: #fb7d34;
        font-size: 16px;
        font-weight 400

  .right-pro
    margin-left:80px;
    height: 100%;
    overflow: hidden;

    .list-wrap
      background white
      border-left 1px solid #eee

      img.banner
        display: block;
        margin: 0 auto;
        height: 110px;

      .category-title
        text-align: center;
        font-size: 16px;
        line-height: 66px;
        position: relative;
        color: #3c3c3c;

      .category-title:before
        content: "";
        position: absolute;
        top: 50%;
        width: 20.4px;
        border-top: 1.2px solid #e0e0e0;
        transform: translate3d(-150%, -50%, 0);

      .category-title:after
        content: "";
        position: absolute;
        top: 50%;
        width: 20.4px;
        border-top: 1.2px solid #e0e0e0;
        transform: translate3d(46%, -50%, 0);

      .category-list
        margin-top: 10px;
        overflow: hidden;

      .category-list .product
        width: 33.3%;
        margin-bottom: 25px;
        float: left;

      .category-list img
        display: block;
        height: 50px;
        margin: 0 auto;

      .category-list p
        font-size: 11.5px;
        -webkit-transform scale(0.9)
        -webkit-transform-origin: center center;
        text-align: center;
        margin-top: 15px;
        color: rgba(0, 0, 0, .54);
        ellipsis()

@keyframes opacity01
  0%
    opacity: 0
  100%
    opacity: 1

img[lazy=loaded]
  -webkit-animation: opacity01 .3s;
  animation: opacity01 .3s;
</style>
